<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  body {
    height: 2000px;
    border: 1px solid black;
  }

  #box {
    width: 200px;
    height: 200px;
    background-color: pink;
  }

  .btn-wrap {
    width: 500px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  ul,
  ol,
  li {
    list-style: none;
  }

  .banner {
    width: 600px;
    height: 400px;
    border: 10px solid #333;
    margin: 30px auto;
    position: relative;
  }

  .banner>ul {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .banner>ul>li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 100px;
    background-color: pink;
    opacity: 0;
    transition: opacity 1s;
  }

  .banner>ul>li>img {
    width: 100%;
    height: 100%;
  }

  .banner>ul>li.active {
    opacity: 1;
  }

  .banner>ol {
    height: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }

  .banner>ol>li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    margin: 0 6px;
  }

  .banner>ol>li.active {
    background-color: purple;
  }

  .banner>.leftRight {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
  }

  .banner>.leftRight>span {
    width: 20px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .clock {
    position: relative;
    margin: 100px auto;
    /* background-color: red; */
    width: 300px;
    height: 300px;
    /* background: url(../clock.png) no-repeat center; */
  }

  /* 画三根针 先把三根针进行绝对居中*/
  .hours {
    position: absolute;
    left: 146px;
    top: 115px;
    width: 8px;
    height: 70px;
    background-color: #000;
  }

  .minutes {
    background-color: #666;
    width: 4px;
    height: 90px;
    position: absolute;
    left: 148px;
    top: 105px;
  }

  .seconds {
    background-color: black;
    width: 2px;
    height: 110px;
    position: absolute;
    left: 149px;
    top: 95px;
  }

  .container {
    height: 500px;
    background: #ccc;
    position: relative;
  }

  .loading {
    width: 100%;
    height: 100%;
    background-color: aqua;
    display: none;
    font-size: 50px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

<body>
  <!-- 拖拽 -->
  <div id="box"></div>
  <div class="btn-wrap">
    <span> x: <input type="text" class="input-x" /> </span>
    <span> y: <input type="text" class="input-y" /> </span>
    <button>GO</button>
  </div>

  <!-- 下拉框 -->
  <select name="省" id="province"></select>
  <select name="市" id="city"></select>
  <select name="县" id="county"></select>

  <!-- 轮播图 -->
  <!-- 约定 最外层 div ，下必须有：<ul class="imgBox">  、 <ol class="pointBox"> 、<div class="leftRight">-->
  <div class="banner" id="banner">
    <!-- 约定：其下 放 img， 称其为  box -->
    <ul class="imgBox"></ul>

    <!-- 约定：其下 放 索引 的 li 标签， 称其为  point -->
    <ol class="pointBox"></ol>

    <!-- 约定 - class 名为 leftRight 是 左右 按钮 -->
    <div class="leftRight">
      <span class="left">&lt;</span>
      <span class="right">&gt;</span>
    </div>
  </div>

  <!-- 时钟 -->
  <div class="clock">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
  </div>

  <!-- Promise实现多个ajax异步请求 -->
  <div class="container">
    <p>我是标题</p>
    <h1 class="one"></h1>
    <h1 class="two"></h1>
    <h1 class="three"></h1>

    <div class="loading">数据请求中...</div>
  </div>
</body>

</html>
<script src="./js/address.js"></script>
<script>
  const domProvince = document.querySelector('#province');
  const domCity = document.querySelector('#city');
  const domCounty = document.querySelector('#county');
  class Choose {
    constructor(province, city, county, address) {
      this.dataProvince()
      this.dataCity()
      this.dataCounty()
      this.address = address
      this.province = province
      this.city = city
      this.county = county
      this.render(domProvince, this.dataProvince());
      this.render(domCity, this.dataCity());
      this.render(domCounty, this.dataCounty());
      this.domProvince()
      this.domCity()
    }
    domProvince() {
      this.province.addEventListener('change', e => {
        this.dataCity = this.getChildListById(e.target.value);
        this.render(domCity, this.dataCity);
        this.dataCounty = this.getChildListById(this.dataCity[0].ID);
        this.render(domCounty, this.dataCounty);
      });
    }
    domCity() {
      this.city.addEventListener('change', e => {
        this.dataCounty = this.getChildListById(e.target.value);
        this.render(domCounty, this.dataCounty);
      });
    }
    render(viewDom, data) {
      const templateHtml = data.map(d =>
        `<option value="${d.ID}">${d.AddName}</option>`)
        .join('');
      viewDom.innerHTML = templateHtml;
    }
    dataProvince() {
      return this.getChildListById(0)
    }
    dataCity() {
      return this.getChildListById(this.dataProvince()[0].ID)
    }
    dataCounty() {
      return this.getChildListById(this.dataCity()[0].ID)
    }
    getChildListById(id) {
      return address.filter(d => d.TopID == id);
    }
  }
  const oDrag = new Choose(domProvince, domCity, domCounty, address);
</script>